<template>
	<div class="catalog_manage_wrapper">
		<div class="headbox">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenForm()"></el-button>
			<el-input size="small" placeholder="请输入库名称" clearable v-model="queryData.name" style="width: 200px">
				<el-button slot="append" icon="el-icon-search" @click="queryTableData"></el-button>
			</el-input>
		</div>
		<sw-data-operate v-model="checkecData" :list="tableData" :mode.sync="showMode">
			<template slot="batch">
				<el-button size="small" type="text" icon="el-icon-rank">移动到</el-button>
				<el-button size="small" type="text" icon="el-icon-delete">批量删除</el-button>
			</template>
		</sw-data-operate>
		<div class="content" v-loading="loading">
			<template v-if="showMode === '1'">
				<catalog-block v-model="checkecData" :data="tableData" @hand="handleDataOperate"></catalog-block>
			</template>
			<template v-if="showMode === '2'">
				<catalog-table v-model="checkecData" :data="tableData" @hand="handleDataOperate"></catalog-table>
			</template>
		</div>
		<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData"></sw-pagination>
		<catalog-move v-model="moveDialog" :data="formData" :catalogs="tableData" @refresh="queryTableData"></catalog-move>
		<catalog-form v-model="formDialog" :data="formData" @refresh="queryTableData"></catalog-form>
		<catalog-drawer v-model="detailDrawer" :data="formData" @refresh="queryTableData"></catalog-drawer>
	</div>
</template>

<script>
import catalogMove from './move';
import catalogForm from './form';
import catalogBlock from './block';
import catalogTable from './table';
import catalogDrawer from './drawer';
import swDataOperate from '../common/dataOperate';
import { getCatalogList } from '@/api/data/tbNetDefCatalog';
export default {
	components: { swDataOperate, catalogBlock, catalogTable, catalogMove, catalogForm, catalogDrawer },
	data() {
		return {
			loading: false,
			showMode: '1',
			dataCount: 100,
			queryData: {
				page: 1,
				limit: 10
			},
			tableData: [],

			formData: {},
			moveDialog: false,
			formDialog: false,
			detailDrawer: false,

			checkecData: []
		};
	},
	mounted() {
		this.queryTableData();
	},
	methods: {
		//获取数据列表
		async getTableData() {
			let params = { ...this.queryData, king: '2' };
			let result = await getCatalogList(params).then((res) => res.data);
			this.loading = false;
			if (result.code == '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		//查询数据
		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		//添加数据
		handleOpenForm() {
			this.formData = {};
			this.formDialog = true;
		},

		//编目操作
		handleDataOperate(type, data) {
			this.formData = { ...data };
			if (type === 'look') {
				this.detailDrawer = true;
			}
			if (type === 'edit') {
				this.formDialog = true;
			}
			if (type === 'move') {
				this.moveDialog = true;
			}
			if (type === 'refresh') {
				this.queryTableData();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.catalog_manage_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
	.headbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 4px;
	}
	.content {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
		margin-top: 10px;
	}
}
</style>
